
import router from '@/router'
import store from '@/store'

// 引入动态路由数组
import { asyncRoutes } from '@/router'

// 引入进度条组件
import Nprogress from 'nprogress'
// 引入css样式
import 'nprogress/nprogress.css' // 引入进度条样式
const whiteList = ['/login', '/404']

router.beforeEach(async(to, form, next) => {
  // 开始显示进度条
  Nprogress.start()

  // 判断是否有token
  const token = store.getters.token

  if (token) {
    // 如果有token
    if (to.path === '/login') {
      // 要去的路径是白名单,强行跳转到首页
      next('/')
    } else {
      // 由于每次点击切换都会调用接口，只有id不存再调用
      if (!store.getters.userId) {
        // 1. 先获取用户资料再跳转
        // 获取当前员工角色权限
        const res = await store.dispatch('user/asyncSetUserInfo')

        // 动态路由中筛选符合条件的路由
        const filterList = asyncRoutes.filter(item => {
          return res.roles.menus.includes(item.children[0].name)
        })
        // 筛选中的路由添加到路由系统中
        router.addRoutes([...filterList, { path: '*', redirect: '/404', hidden: true }])

        // 存储到vuex中
        store.commit('menu/setfilterList', filterList)

        // 关键代码在这里哦
        next({
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 覆盖上一次的记录
        })

        return
      }

      // 2. 不是白名单放行
      next()
    }
  } else {
    // 如果没有token
    if (whiteList.includes(to.path)) {
      // 如果要去白名单放行
      next()
    } else {
      // 强行跳转到登录
      next('/login')
    }
  }
  // 结束隐藏进度条
  // 开始显示进度条
  Nprogress.done()
})
